import React, { useState } from 'react'
import './Tcss/pxq.scss'
import { Sticky, ShareSheet, Toast } from 'react-vant'
import { GoodJobO } from '@react-vant/icons';
import { ArrowLeftOutlined, ExportOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import { Rate, Avatar } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
let b = require("../../assets/p.png")
let a = require("../../assets/1.png")

export default function Pxq() {
    const [value, setValue] = useState(true)
    const [zan, setZan] = useState(true)
    const [count , setCount] = useState(121)
    const options = [
        [
            { name: '微信', icon: 'wechat' },
            { name: '朋友圈', icon: 'wechat-moments' },
            { name: '微博', icon: 'weibo' },
            { name: 'QQ', icon: 'qq' },
        ]
    ]
    const [visible, setVisible] = useState(false)
    const navigate = useNavigate()
    const [img, setImg] = useState([
        {
            id: 1,
            img: b
        },
        {
            id: 2,
            img: b
        },
        {
            id: 3,
            img: b
        },
        {
            id: 4,
            img: b
        },
        {
            id: 5,
            img: b
        },
        {
            id: 6,
            img: b
        },
        {
            id: 7,
            img: b
        },
        {
            id: 8,
            img: b
        },
        {
            id: 9,
            img: b
        }
    ])
    return (
        <div>
            <Sticky offsetTop={0}>
                <div className='header'>
                    <ArrowLeftOutlined className='t1' onClick={() => { navigate('/tpl') }} />
                    <img src={b}></img>
                    <span className='name'>Daisy</span>
                    {
                        value ? <button className='btn' onClick={() => { setValue(false); Toast.success('关注成功') }}>+关注</button>
                        : <button className='btn' onClick={() => { setValue(true); Toast.success('已取消关注') }}>已关注</button>
                    }
                    <ExportOutlined className='t2' onClick={() => setVisible(true)} />
                </div>
            </Sticky>
            <div className='content2'>
                <Rate defaultValue={5} style={{ marginLeft: '18px', marginTop: '10px', width: '140px' }} />
                <span className='fen'>5.0</span>
                <span className='time'>2019-12-23 12:23</span>
            </div>
            <div className='ping'>
                <div className='text'>
                    现场的氛围非常好，很嗨，四个舞台演出了不一样的乐队风格，最后朴树的表演真的太棒了…
                </div>
                <div className='img'>
                    {
                        img.map((item, index) => {
                            return (
                                <img src={item.img} key={index}></img>
                            )
                        }
                        )
                    }
                </div>
                <div className='content1' onClick={() => { navigate('/app/type') }}>
                    <div className='info'>
                        <img src={a} />
                        <div className='info1'>
                            <span className='name'>话剧【恋爱中的犀牛】</span>
                            <span className='address'>北京今日美术馆</span>
                        </div>
                    </div>
                </div>
                <div className='content3'>
                    <div className='info2'>
                        <span className='lun'>评论 (5)</span>
                    </div>
                    <Avatar
                        size="normal"
                        style={{ marginInlineEnd: 0 }}
                        src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
                    />
                    <div className='ping2'>
                        <span className='name1'>Anne</span>
                        <span className='time1'>23.19</span>
                    </div>
                    <span className='zan'>
                        {
                            zan ? <svg t="1718462221127" className="icon" onClick={() => { setZan(false); setCount(count + 1) }} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4931" width="25" height="25"><path d="M190.193225 471.411583c14.446014 0 26.139334-11.718903 26.139334-26.13831 0-14.44499-11.69332-26.164916-26.139334-26.164916-0.271176 0-0.490164 0.149403-0.73678 0.149403l-62.496379 0.146333c-1.425466-0.195451-2.90005-0.295735-4.373611-0.295735-19.677155 0-35.621289 16.141632-35.621289 36.114522L86.622358 888.550075c0 19.949354 15.96767 35.597753 35.670407 35.597753 1.916653 0 3.808746 0.292666 5.649674 0l61.022819 0.022513c0.099261 0 0.148379 0.048095 0.24764 0.048095 0.097214 0 0.146333-0.048095 0.24457-0.048095l0.73678 0 0-0.148379c13.413498-0.540306 24.174586-11.422144 24.174586-24.960485 0-13.55983-10.760065-24.441669-24.174586-24.981974l0-0.393973-50.949392 0 1.450025-402.275993L190.193225 471.409536z" fill="#5D5D5D" p-id="4932"></path><path d="M926.52241 433.948343c-19.283182-31.445176-47.339168-44.172035-81.289398-45.546336-1.77032-0.246617-3.536546-0.39295-5.380544-0.39295l-205.447139-0.688685c13.462616-39.059598 22.698978-85.58933 22.698978-129.317251 0-28.349675-3.193739-55.962569-9.041934-82.542948l-0.490164 0.049119c-10.638291-46.578852-51.736315-81.31498-100.966553-81.31498-57.264215 0-95.466282 48.15065-95.466282 106.126063 0 3.241834-0.294712 6.387477 0 9.532097-2.996241 108.386546-91.240027 195.548698-196.23636 207.513194l0 54.881958-0.785899 222.227314 0 229.744521 10.709923 0 500.025271 0.222057 8.746198-0.243547c19.35686 0.049119 30.239721-4.817726 47.803749-16.116049 16.682961-10.761088 29.236881-25.50079 37.490869-42.156122 2.260483-3.341095 4.028757-7.075139 5.106298-11.20111l77.018118-344.324116c1.056052-4.053316 1.348718-8.181333 1.056052-12.160971C943.643346 476.446249 938.781618 453.944769 926.52241 433.948343zM893.82573 486.837924l-82.983993 367.783411-0.099261-0.049119c-2.555196 6.141884-6.879688 11.596106-12.872169 15.427364-4.177136 2.727111-8.773827 4.351098-13.414521 4.964058-1.49812-0.195451-3.046383 0-4.620227 0l-477.028511-0.540306-0.171915-407.408897c89.323375-40.266076 154.841577-79.670527 188.596356-173.661202 0.072655 0.024559 0.124843 0.049119 0.195451 0.072655 2.99931-9.137101 6.313799-20.73423 8.697079-33.164331 5.551436-29.185716 5.258771-58.123792 5.258771-58.123792-4.937452-37.98001 25.940812-52.965306 44.364417-52.965306 25.304316 0.860601 50.263777 33.656541 50.263777 52.326762 0 0 5.600555 27.563776 5.649674 57.190537 0.048095 37.366026-4.6673 56.847729-4.6673 56.847729l-0.466628 0c-5.872754 30.879288-16.214287 60.138682-30.464849 86.964654l0.36839 0.342808c-2.358721 4.815679-3.709485 10.220782-3.709485 15.943111 0 19.922748 19.088754 21.742187 38.765909 21.742187l238.761895 0.270153c0 0 14.666024 0.465604 14.690584 0.465604l0 0.100284c12.132318-0.638543 24.221658 5.207605 31.100322 16.409738 5.504364 9.016351 6.437619 19.6045 3.486404 28.988218L893.82573 486.837924z" fill="#5D5D5D" p-id="4933"></path><path d="M264.827039 924.31872c0.319272 0.024559 0.441045 0.024559 0.295735-0.024559 0.243547-0.048095 0.367367-0.074701-0.295735-0.074701s-0.539282 0.026606-0.271176 0.074701C264.43409 924.343279 264.532327 924.343279 264.827039 924.31872z" fill="#5D5D5D" p-id="4934"></path></svg>
                                : <svg t="1718462405644" className="icon" onClick={() => { setZan(true); setCount(count - 1) }} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5953" width="25" height="25"><path d="M507.733333 827.733333c-72.533333 0-140.8 4.266667-204.8 4.266667-21.333333 0-38.4-17.066667-38.4-38.4v-256c0-21.333333 17.066667-38.4 38.4-38.4h320c8.533333 0 21.333333 4.266667 25.6 12.8 8.533333 8.533333 8.533333 21.333333 12.8 25.6 12.8 106.666667-34.133333 268.8-34.133333 268.8 0 8.533333-4.266667 12.8-4.266667 12.8-4.266667 0-8.533333 4.266667-17.066666 4.266667h-64c-8.533333 4.266667-21.333333 4.266667-34.133334 4.266666z" fill="#F5CB2B" p-id="5954"></path><path d="M285.866667 964.266667v-59.733334h473.6c4.266667 0 12.8-4.266667 12.8-12.8l102.4-422.4c4.266667-21.333333 0-38.4-4.266667-46.933333H512l8.533333-34.133333c8.533333-42.666667 17.066667-81.066667 17.066667-123.733334V213.333333c0-21.333333 0-42.666667-12.8-68.266666-4.266667-8.533333-8.533333-17.066667-21.333333-21.333334-8.533333-4.266667-17.066667-8.533333-25.6-8.533333-4.266667 0-8.533333 0-12.8 4.266667-8.533333 4.266667-8.533333 8.533333-12.8 12.8 0 4.266667-4.266667 12.8-8.533334 29.866666-4.266667 12.8-4.266667 12.8-4.266666 21.333334l-4.266667 17.066666c-4.266667 12.8-4.266667 25.6-8.533333 38.4 0 8.533333-4.266667 17.066667-21.333334 55.466667v21.333333c-4.266667 12.8-4.266667 17.066667-8.533333 29.866667-8.533333 17.066667-17.066667 34.133333-29.866667 55.466667l-8.533333 17.066666-72.533333 4.266667-4.266667-59.733333 42.666667-4.266667c8.533333-12.8 12.8-25.6 17.066666-34.133333 4.266667-12.8 8.533333-17.066667 8.533334-25.6l8.533333-25.6c12.8-34.133333 17.066667-42.666667 17.066667-51.2 8.533333-12.8 8.533333-25.6 12.8-34.133334V170.666667c0-4.266667 0-8.533333 4.266666-17.066667 8.533333-25.6 8.533333-38.4 17.066667-51.2 4.266667-8.533333 12.8-25.6 38.4-34.133333 12.8-4.266667 25.6-8.533333 42.666667-8.533334s34.133333 8.533333 51.2 17.066667c25.6 12.8 34.133333 34.133333 42.666666 42.666667 17.066667 29.866667 25.6 64 21.333334 98.133333v51.2c0 34.133333-4.266667 64-12.8 98.133333h281.6c17.066667 0 38.4 8.533333 46.933333 25.6 17.066667 21.333333 21.333333 59.733333 12.8 93.866667l-102.4 422.4c-8.533333 34.133333-38.4 55.466667-68.266667 55.466667H285.866667z" fill="#6A3906" p-id="5955"></path><path d="M290.133333 964.266667H132.266667c-25.6 0-46.933333-21.333333-46.933334-46.933334V409.6c0-25.6 21.333333-46.933333 46.933334-46.933333h157.866666v601.6z m-145.066666-59.733334h89.6V422.4H145.066667v482.133333z" fill="#6A3906" p-id="5956"></path></svg>
                        }
                        <span>{count}</span>
                    </span>
                    <div className='ping3'>
                        <span className='ke'>一直期待，想去，谢谢分享</span>
                    </div>
                    <div className='fu'>
                        <span className='zuo'>Daisy</span> &nbsp;
                        <button className='btn1'>作者</button>&nbsp;&nbsp;:&nbsp;&nbsp;
                        <span className='fu1'>不客气哦~非常值得一去.</span>
                    </div>
                </div>
            </div>
            <ShareSheet
                visible={visible}
                options={options}
                title='立即分享给好友'
                onCancel={() => setVisible(false)}
                onClick={(option, index) => {
                    Toast.info('分享成功')
                    setVisible(false)
                }}
                onSelect={(option, index) => {
                    Toast.info('分享成功')
                    setVisible(false)
                }}
            />
        </div>
    )
}
